<template>
  <div class="feedback">
    <MyHeader titles="意见反馈" lefts="返回" :upPage="true" />
    <van-field
      v-model="message"
      rows="2"
      autosize
      label="留言"
      type="textarea"
      maxlength="150"
      placeholder="请输入留言"
      show-word-limit
      :error-message="errmsg"
      @input="onInput"
    />
    <van-cell title="上传图片" class="upImg">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <van-uploader v-model="fileList" multiple :after-read="afterRead" />
      </template>
    </van-cell>
    <van-button type="danger" block round @click="onClick">提交</van-button>
  </div>
</template>

<script>
import MyHeader from "@/components/Home/Header";

export default {
  components: {
    MyHeader
  },
  data() {
    return {
      message: "",
      errmsg: "",
      fileList: []
    };
  },
  methods: {
    onInput(e) {
      console.log(e);
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    onClick() {
      this.$toast({
        type:'success',
        message:'提交成功',
        duration:1000,
        onClose:()=>window.location.reload()
      })
    }
  }
};
</script>
<style lang="less" scoped>
.feedback {
  height: 100vh;
  background: #f8f8f8;
  h1 {
    margin: 0;
    padding: 32px 16px 16px;
    color: rgba(69, 90, 100, 0.6);
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
  }
  .upImg {
    padding: 10px 0 10px 16px;
  }
  /deep/.van-button {
    top: 50px;
  }
  /deep/.van-uploader {
    width: 80%;
  }
  /deep/.van-uploader__wrapper {
    float: right;
  }
}
</style>